<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px; padding:0px;}
.stage{width: 1200px; height: 60px; margin:100px auto; perspective: 800px;}
.container{position: relative; width: 1200px; height: 60px; transform-style: preserve-3d; transition: 1s; transform-origin: 0 60px; }
.front{position: absolute; width: 1200px; height: 60px; background:rgba(0,0,0,0.5); background-size: cover; backface-visibility: hidden;}             
.stage:hover .container{transform: rotateX(100deg);}
</style>
</head>
<!-- http://www.doncheng.cn/ 翻转特效参考 -->
<body>
<div class='stage'>
    <div class='container'>
        <div class='front'></div>
    </div>
</div>
</body>
</html>